<template>
  <div id="collection">
    <!-- <div class="head">
      <div class="container">
      </div>
    </div> -->

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#ff4400"
      text-color="#fff" active-text-color="#fff">
      <div class="collection-text">
        <i class="el-icon-collection" style='font-size: 30px; color: initial; vertical-align: middle; margin: 0 10px'></i><span style="line-height: 61px">收藏夹</span>
      </div>
      <el-menu-item index="1">宝贝收藏</el-menu-item>
    </el-menu>
    <el-menu :default-active="activeIndex1" class="el-menu-demo" mode="horizontal" style="width: 0%">
      <el-menu-item index="1" style="margin-left: 0">全部宝贝</el-menu-item>
    </el-menu>
    <ul class="list">
      <li v-for="(items, index) in activeUlData.slice((currentPage-1) * pagesize, currentPage * pagesize)" :key="items.goodsWant.goodsWantInfo" @mouseenter="show(index)" @mouseleave="hidden(index)">
        <i class="el-icon-delete" @click="deleteClick(items.favoriteId)"></i>
        <a href="javascript:void(0)" @click="goodsClick(items.goodsWant.goodsWant, items.goodsWant.goodsWantId)"><img :src="items.goodsWant.goodsWantImage" alt=""></a>
        <a href="javascript:void(0)" @click="goodsClick(items.goodsWant.goodsWant, items.goodsWant.goodsWantId)" style="white-space: nowrap;" :title="items.goodsWant.goodsWantInfo">{{items.goodsWant.goodsWantInfo}}</a><br>
        <span style="color: #ff4400; font-size: 15px"><strong>￥{{parseFloat(items.goodsWant.goodsWantPrice).toFixed(2)}}</strong></span>
      </li>
    </ul>

    <el-pagination background @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currentPage" 
                :page-size="pagesize"  layout="total, prev, pager, next, jumper"  :total="ulData.length" prev-text="上一页" 
                next-text="下一页" style="text-align: center; position: absolute; bottom: 20px; left: 380px;">
    </el-pagination>
  </div>
</template>

<script>
import {request} from '@/network/request'

export default {
  data() {
    return {
      activeIndex: '1',
      activeIndex1: '1',
      // 默认显示页面为1
      currentPage: 1,
      // 每页的数据条数
      pagesize: 14, 
      ulData: [
        {favoriteId: '', goodsWant: {goodsWantImage: '', goodsWantInfo: '', goodsWantPrice: 0, isDeleted: ''}},
        // {goodsWantImage: 'https://img.alicdn.com/bao/uploaded/i3/441695975/TB2IbsVfgnH8KJjSspcXXb3QFXa_!!441695975.jpg_160x160xz.jpg', 
        //   goodsWantInfo: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料2', goodsWantPrice: '49.00'
        // },
        // {goodsWantImage: 'https://img.alicdn.com/bao/uploaded/i3/441695975/TB2IbsVfgnH8KJjSspcXXb3QFXa_!!441695975.jpg_160x160xz.jpg', 
        //   goodsWantInfo: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料3', goodsWantPrice: '49.00'
        // },
        // {imgSrc: 'https://img.alicdn.com/bao/uploaded/i3/441695975/TB2IbsVfgnH8KJjSspcXXb3QFXa_!!441695975.jpg_160x160xz.jpg', 
        //   descrip: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料4', price: '49.00'
        // },
        // {imgSrc: 'https://img.alicdn.com/bao/uploaded/i3/441695975/TB2IbsVfgnH8KJjSspcXXb3QFXa_!!441695975.jpg_160x160xz.jpg', 
        //   descrip: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料5', price: '49.00'
        // },
        // {imgSrc: 'https://img.alicdn.com/bao/uploaded/i3/441695975/TB2IbsVfgnH8KJjSspcXXb3QFXa_!!441695975.jpg_160x160xz.jpg', 
        //   descrip: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料6', price: '49.00'
        // },
        // {imgSrc: 'https://img.alicdn.com/bao/uploaded/i3/441695975/TB2IbsVfgnH8KJjSspcXXb3QFXa_!!441695975.jpg_160x160xz.jpg', 
        //   descrip: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料7', price: '49.00'
        // },
        // {imgSrc: 'https://img.alicdn.com/bao/uploaded/i3/441695975/TB2IbsVfgnH8KJjSspcXXb3QFXa_!!441695975.jpg_160x160xz.jpg', 
        //   descrip: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料8', price: '49.00'
        // },
        // {imgSrc: 'https://img.alicdn.com/bao/uploaded/i3/441695975/TB2IbsVfgnH8KJjSspcXXb3QFXa_!!441695975.jpg_160x160xz.jpg', 
        //   descrip: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料9', price: '49.00'
        // },
        // {imgSrc: 'https://img.alicdn.com/bao/uploaded/i3/441695975/TB2IbsVfgnH8KJjSspcXXb3QFXa_!!441695975.jpg_160x160xz.jpg', 
        //   descrip: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料10', price: '49.00'
        // },
        // {imgSrc: 'https://img.alicdn.com/bao/uploaded/i3/441695975/TB2IbsVfgnH8KJjSspcXXb3QFXa_!!441695975.jpg_160x160xz.jpg', 
        //   descrip: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料11', price: '49.00'
        // },
        // {imgSrc: 'https://img.alicdn.com/bao/uploaded/i3/441695975/TB2IbsVfgnH8KJjSspcXXb3QFXa_!!441695975.jpg_160x160xz.jpg', 
        //   descrip: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料12', price: '49.00'
        // },
        // {imgSrc: 'https://img.alicdn.com/bao/uploaded/i3/441695975/TB2IbsVfgnH8KJjSspcXXb3QFXa_!!441695975.jpg_160x160xz.jpg', 
        //   descrip: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料13', price: '49.00'
        // },
        // {imgSrc: 'https://img.alicdn.com/bao/uploaded/i3/441695975/TB2IbsVfgnH8KJjSspcXXb3QFXa_!!441695975.jpg_160x160xz.jpg', 
        //   descrip: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料14', price: '49.00'
        // },
        // {imgSrc: 'https://img.alicdn.com/bao/uploaded/i3/441695975/TB2IbsVfgnH8KJjSspcXXb3QFXa_!!441695975.jpg_160x160xz.jpg', 
        //   descrip: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料15', price: '49.00'
        // },
        // {imgSrc: 'https://img.alicdn.com/bao/uploaded/i3/441695975/TB2IbsVfgnH8KJjSspcXXb3QFXa_!!441695975.jpg_160x160xz.jpg', 
        //   descrip: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料16', price: '49.00'
        // },
        // {imgSrc: 'https://img.alicdn.com/bao/uploaded/i3/441695975/TB2IbsVfgnH8KJjSspcXXb3QFXa_!!441695975.jpg_160x160xz.jpg', 
        //   descrip: '广禧原味奶盖粉800g 皇茶喜贡茶奶盖茶专用 海盐芝士奶盖原料17', price: '49.00'
        // },
      ]
    };
  },
  computed: {
    // 筛选出isDeleted值为false的内容
    activeUlData() {
      return this.ulData.filter(item => !item.goodsWant.isDeleted)
    }
  },
  methods: {
    //每页下拉显示数据
    handleSizeChange(size) {
      this.pagesize = size;
      /*console.log(this.pagesize) */
    },
    //点击第几页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      /*console.log(this.currentPage) */
    },
    goodsClick(goodsWant, goodsWantId) {
      // 点击商品图片或文字，进入商品详情页面
      this.$store.commit('changeGoodsWantDetail', goodsWant)
      this.$store.commit('changeGoodsId', goodsWantId)
      this.$router.push('/goodsDetail')
    },
    show(index) {
      // 鼠标移进商品图片，显示删除按钮
      document.querySelector(`#collection ul.list li:nth-of-type(${index + 1}) i`).style.visibility = 'visible'
    },
    hidden(index) {
      // 鼠标移出商品图片，隐藏删除按钮
      document.querySelector(`#collection ul.list li:nth-of-type(${index + 1}) i`).style.visibility = 'hidden'
    },
    deleteClick(favoriteId) {
      // 点击删除按钮，向服务器发送请求
      request({
        url: `/favorite/deleteFavoriteInfo/${favoriteId}`,
        method: 'delete'
      }).then(res => {
        // console.log(res);
        if(res.data.flag) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
        }
        // 删除成功后重新请求，更新页面数据
        request({
          url: `/favorite/getFavoriteInfo/${this.$store.state.userId}`,
          method: 'get'
        }).then(res => {
          // console.log(res);
          if(res.data.flag) {
            this.ulData = res.data.data.items
          }
        }).catch(err => {
          console.log(err);
        })
      }).catch(err => {
        console.log(err);
      })
    }
  },
  mounted() {
    // 一进到本页面，就向服务器请求数据
    request({
      url: `/favorite/getFavoriteInfo/${this.$store.state.userId}`,
      method: 'get'
    }).then(res => {
      console.log(res);
      if(res.data.flag) {
        this.ulData = res.data.data.items
      }
    }).catch(err => {
      console.log(err);
    })
  }
}
</script>

<style scoped>
  #collection {
    position: relative;
    padding-bottom: 100px;
  }

  #collection .collection-text {
    float: left;
    margin-left: 20px;
    color: #fff;
  }

  #collection .el-menu-item {
    margin-left: 100px;
  }

  #collection ul {
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
  }

  #collection ul li {
    width: 148px;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    flex: none;
    position: relative;
  }

  #collection ul li:not(:nth-child(7n)) {
    /* margin-right: calc((70% - 1250px) / 4); */
    margin-right: calc(11% / 6);
  }

  #collection ul li i {
    position: absolute;
    right: 0;
    top: 0;

    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 15px;

    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    visibility: hidden;
    cursor: pointer;
  }

  #collection ul li i:hover {
    background-color: #ff4400;
  }

  #collection ul li img {
    width: 148px;
    height: 148px;
  }

  #collection ul li a {
    font-size: 12px;
    text-decoration: none;
    color: inherit;
  }

  #collection ul li a:hover {
    color: #f00;
    text-decoration: underline;
  }
</style>